<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax01</title>
  <style type="text/css">
   div{
        background: rgba(30,100,30,0.3);
        width: 500px;
        height: 500px;
        letter-spacing: 5px;
        padding: 5px
      }
 
  </style>
  <script type="text/javascript" src="ajax1.js"></script>
</head>
<body>
  <input type="button" id="btn" value="测试按钮">
  <div id="div1"></div>
  <script>
	  var btn=document.getElementById('btn');
	  var div1=document.getElementById('div1');
	  btn.onclick=function (){
	    ajax('data.json',function(str){ //1、ajax读取json和读取普通文本，和读取链接都是一样的，在url处放上json文件的地址即可
	        var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象
	        //alert(typeof obj)
	        for(var i in obj){
	            for(var j in obj[i]){
		            // div1.innerHTML+=j+':'+obj[i][j]+'<br>';
		            var lii=document.createElement('li'); //3、dom动态创建元素document.createElement
		            lii.innerHTML=j+':'+obj[i][j];
		            div1.appendChild(lii) //4、dom动态给元素添加孩子
	            }
	
	        }
	        
	    },function(s){
	      alert(s)
	    })
	  }
  </script>
</body>
</html>